<template>
  <div id="app">
    <div class="container">
      <div data-v-47602ae8="" data-v-348e9d26="" class="module-box module-box">
        <div data-v-5e93c800="" data-v-4cafd6a9="" data-v-348e9d26=""
          class="home-card-box storage-age span-1 fix-module" params="[object Object]" data-v-47602ae8="">
          <div data-v-5e93c800="" class="section-header">
            <span data-v-5e93c800="" class="header-left"><span data-v-5e93c800="" class="header-title">实时销量</span><i
                data-v-5e93c800="" class="iconfont lx_arrow_down_rev ak-rotate-270"></i></span>
            <div data-v-5e93c800="" class="header-right">
              更新至 2024-07-03 18:38（站点时间）
            </div>
          </div>
          <div data-v-5e93c800="" class="section-content">
            <div data-v-4cafd6a9="" data-v-5e93c800="" class="content">
              <div class="el-loading-mask" style="display: none">
                <div class="el-loading-spinner">
                  <svg viewBox="25 25 50 50" class="circular">
                    <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                  </svg>
                </div>
              </div>
              <div data-v-b4049042="" data-v-4cafd6a9="" class="card-item" data-v-5e93c800="">
                <div data-v-b4049042="" class="title">销量</div>
                <div data-v-b4049042="" class="value" style="overflow: hidden; text-overflow: ellipsis">
                  &lrm; {{ nowData && nowData.orderCount ? nowData.orderCount : 0 }}
                </div>
                <div data-v-b4049042="" class="compare">
                  <div data-v-b4049042="" class="label">昨</div>
                  <div data-v-b4049042="" class="compare-value">
                    &lrm;{{ yesterData && yesterData.orderCount  ? yesterData.orderCount : 0 }}
                  </div>
                </div>
              </div>
              <div data-v-b4049042="" data-v-4cafd6a9="" class="card-item" data-v-5e93c800="">
                <div data-v-b4049042="" class="title">销售额</div>
                <div data-v-b4049042="" class="value" style="
                    color: rgb(0, 91, 245);
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">
                  &lrm;1305.56
                </div>
                <div data-v-b4049042="" class="compare">
                  <div data-v-b4049042="" class="label">昨</div>
                  <div data-v-b4049042="" class="compare-value">
                    &lrm;2356.56
                  </div>
                </div>
              </div>
              <div data-v-b4049042="" data-v-4cafd6a9="" class="card-item" data-v-5e93c800="">
                <div data-v-b4049042="" class="title">订单量</div>
                <div data-v-b4049042="" class="value" style="overflow: hidden; text-overflow: ellipsis">
                  &lrm;10
                </div>
                <div data-v-b4049042="" class="compare">
                  <div data-v-b4049042="" class="label">昨</div>
                  <div data-v-b4049042="" class="compare-value">&lrm;13</div>
                </div>
              </div>
              <div data-v-b4049042="" data-v-4cafd6a9="" class="card-item" data-v-5e93c800="">
                <div data-v-b4049042="" class="title">平均售价</div>
                <div data-v-b4049042="" class="value" style="overflow: hidden; text-overflow: ellipsis">
                  &lrm;563.00
                </div>
                <div data-v-b4049042="" class="compare">
                  <div data-v-b4049042="" class="label">昨</div>
                  <div data-v-b4049042="" class="compare-value">
                    &lrm;652.00
                  </div>
                </div>
              </div>
              <div data-v-b4049042="" data-v-4cafd6a9="" class="card-item" data-v-5e93c800="">
                <div data-v-b4049042="" class="title">取消订单数</div>
                <div data-v-b4049042="" class="value" style="overflow: hidden; text-overflow: ellipsis">
                  &lrm;1
                </div>
                <div data-v-b4049042="" class="compare">
                  <div data-v-b4049042="" class="label">昨</div>
                  <div data-v-b4049042="" class="compare-value">&lrm;0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-v-5e93c800="" data-v-14448908="" data-v-348e9d26="" class="home-card-box performance-trend span-9"
          params="[object Object]" data-v-47602ae8="">
          <div data-v-5e93c800="" class="section-header">
            <span data-v-5e93c800="" class="header-left"><span data-v-5e93c800="" class="header-title">业绩走势</span><i
                data-v-5e93c800="" class="iconfont lx_arrow_down_rev ak-rotate-270"></i></span>
            <div data-v-5e93c800="" class="header-right">
              <div data-v-14448908="" class="ak-flex" data-v-5e93c800="" style="column-gap: 8px">
                <div role="radiogroup" class="el-radio-group">
                  <label v-for="(item, index) in items" :key="index" role="radio"
                    :aria-checked="activeIndex === index ? 'true' : 'false'" @click="setActive(index)"
                    @keydown.space.prevent="setActive(index)" tabindex="0"
                    class="el-radio-button el-radio-button--mini">
                    <input type="radio" :value="item.value" :checked="activeIndex === index"
                      :name="'radio-group-' + uniqueId" class="el-radio-button__orig-radio"
                      :id="'radio-' + uniqueId + '-' + index" />
                    <span class="el-radio-button__inner">{{ item.text }}</span>
                  </label>
                </div>
              </div>
              <!----><span data-v-14448908="" data-v-5e93c800="" class="ak-flex">
                <div data-v-d0abfcea="" data-v-14448908="" data-v-5e93c800="" style="display: none">
                  <i data-v-d0abfcea="" class="iconfont lx_set is-bookmark"></i>
                  <div data-v-d0abfcea="" class="el-dialog__wrapper full-height" style="display: none">
                    <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog"
                      style="margin-top: 120px; width: 800px">
                      <div class="el-dialog__header">
                        <div data-v-d0abfcea="">
                          <span data-v-d0abfcea="" class="ak-fw-600 ak-fz-16 ak-lh-24"
                            style="color: rgb(0, 0, 0)">自定义指标</span><span data-v-d0abfcea="" class="ak-fz-14 ak-lh-24"
                            style="color: rgb(137, 147, 163)">（最少选择 1 项，最多选择 8 项）</span>
                        </div>
                        <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                          <i class="el-dialog__close iconfont lx_close"></i>
                        </button>
                      </div>
                      <!---->
                      <div class="el-dialog__footer">
                        <span data-v-d0abfcea="" class="dialog-footer"><button data-v-d0abfcea="" type="button"
                            class="el-button el-button--default el-button--small is-round">
                            <!----><!----><span class="text-wrap">取消</span></button><button data-v-d0abfcea=""
                            type="button" class="el-button el-button--default el-button--small is-round">
                            <!----><!----><span class="text-wrap">恢复默认值</span></button><button data-v-d0abfcea=""
                            type="button" class="el-button el-button--primary el-button--small is-round">
                            <!----><!----><span class="text-wrap">确定</span>
                          </button></span>
                      </div>
                    </div>
                  </div>
                </div>
                <i data-v-14448908="" data-v-5e93c800="" class="iconfont is-bookmark lx_full_screen"></i>
              </span>
            </div>
          </div>
          <div data-v-5e93c800="" class="section-content">
            <div data-v-164faaf0="" data-v-14448908="" class="card-list" data-v-5e93c800="">
              <div data-v-164faaf0="" class="card" :class="salesClass" @click="handleSales">
                <div data-v-164faaf0="" class="ak-fz-12 ak-lh-18 oneLine ak-align-center" style="
                    color: rgba(0, 0, 0, 0.65);
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">
                  <span data-v-164faaf0="">销量</span><!---->
                </div>
                <div data-v-164faaf0="" class="ak-mg-top-6 card-value ak-primary-text oneLine"
                  style="overflow: hidden; text-overflow: ellipsis">
                  &lrm;10
                </div>
                <div data-v-164faaf0="" class="ak-mg-top-6 ak-align-center">
                  <span data-v-164faaf0="" class="el-popover-span"><!----><span class="el-popover__reference-wrapper">
                      <div data-v-164faaf0="" class="ak-quaternary-text chain-ratio el-popover__reference"
                        aria-describedby="el-popover-2647" tabindex="0">
                        <div data-v-164faaf0="">
                          &lrm;0
                          <span data-v-164faaf0="" class="ak-quaternary-text ak-mg-left-6">
                            0%
                          </span>
                        </div>
                        <div data-v-164faaf0="" class="ak-mg-top-4">
                          &lrm;0
                          <span data-v-164faaf0="" class="ak-quaternary-text ak-mg-left-6">
                            0%
                          </span>
                        </div>
                      </div>
                    </span></span>
                </div>
              </div>
              <div data-v-164faaf0="" class="card" :class="OrderClass" @click="handleOrder">
                <div data-v-164faaf0="" class="ak-fz-12 ak-lh-18 oneLine ak-align-center" inelement="0" style="
                    color: rgba(0, 0, 0, 0.65);
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">
                  <span data-v-164faaf0="">订单量</span><!---->
                </div>
                <div data-v-164faaf0="" class="ak-mg-top-6 card-value ak-primary-text oneLine"
                  style="overflow: hidden; text-overflow: ellipsis" inelement="0">
                  &lrm;10
                </div>
                <div data-v-164faaf0="" class="ak-mg-top-6 ak-align-center">
                  <span data-v-164faaf0="" class="el-popover-span"><!----><span class="el-popover__reference-wrapper">
                      <div data-v-164faaf0="" class="ak-quaternary-text chain-ratio el-popover__reference"
                        aria-describedby="el-popover-2055" tabindex="0">
                        <div data-v-164faaf0="">
                          &lrm;0
                          <span data-v-164faaf0="" class="ak-quaternary-text ak-mg-left-6">
                            0%
                          </span>
                        </div>
                        <div data-v-164faaf0="" class="ak-mg-top-4">
                          &lrm;0
                          <span data-v-164faaf0="" class="ak-quaternary-text ak-mg-left-6">
                            0%
                          </span>
                        </div>
                      </div>
                    </span></span>
                </div>
              </div>
              <div data-v-164faaf0="" class="card" :class="linesClass" @click="handleLines">
                <div data-v-164faaf0="" class="ak-fz-12 ak-lh-18 oneLine ak-align-center" inelement="0" style="
                    color: rgba(0, 0, 0, 0.65);
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">
                  <span data-v-164faaf0="">销售额</span><!---->
                </div>
                <div data-v-164faaf0="" class="ak-mg-top-6 card-value ak-primary-text oneLine ak-link-hover-text"
                  style="overflow: hidden; text-overflow: ellipsis" inelement="0">
                  $&lrm;1305.56
                </div>
                <div data-v-164faaf0="" class="ak-mg-top-6 ak-align-center">
                  <span data-v-164faaf0="" class="el-popover-span"><!----><span class="el-popover__reference-wrapper">
                      <div data-v-164faaf0="" class="ak-quaternary-text chain-ratio el-popover__reference"
                        aria-describedby="el-popover-558" tabindex="0">
                        <div data-v-164faaf0="">
                          $&lrm;0.00
                          <span data-v-164faaf0="" class="ak-quaternary-text ak-mg-left-6">
                            0%
                          </span>
                        </div>
                        <div data-v-164faaf0="" class="ak-mg-top-4">
                          $&lrm;0.00
                          <span data-v-164faaf0="" class="ak-quaternary-text ak-mg-left-6">
                            0%
                          </span>
                        </div>
                      </div>
                    </span></span>
                </div>
              </div>
            </div>
            <div id="main" style="width: 100%; height: 300px"></div>
          </div>
        </div>
        <div data-v-5e93c800="" data-v-ee83f0f6="" data-v-348e9d26="" class="home-card-box storage-age span-3"
          params="[object Object]" data-v-47602ae8="">
          <div data-v-5e93c800="" class="section-header">
            <span data-v-5e93c800="" class="header-left"><span data-v-5e93c800=""
                class="header-title">待处理事项</span></span>
            <div data-v-5e93c800="" class="header-right"></div>
          </div>
          <div data-v-5e93c800="" class="section-content">
            <div data-v-ee83f0f6="" data-v-5e93c800="" class="content">
              <div data-v-ee83f0f6="" data-v-5e93c800="" class="section">
                <div data-v-ee83f0f6="" data-v-5e93c800="" class="ak-align-center" style="color: rgb(243, 59, 108)">
                  <i data-v-ee83f0f6="" data-v-5e93c800="" class="el-icon-share"
                    style="color: rgb(243, 59, 108) width: 20px; height: 20px"></i><span data-v-ee83f0f6=""
                    data-v-5e93c800="" class="section-title">运营</span>
                </div>
                <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-section">
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">库存不足</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-5251" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">库存冗余</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-7458" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">被跟卖</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-6241" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">丢失购物车</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-6631" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">待回复邮件</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-9601" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">发票上传失败</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-2726" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                </div>
              </div>
              <div data-v-ee83f0f6="" data-v-5e93c800="" class="section">
                <div data-v-ee83f0f6="" data-v-5e93c800="" class="ak-align-center" style="color: rgb(0, 139, 248)">
                  <i data-v-ee83f0f6="" data-v-5e93c800="" class="el-icon-s-check"
                    style="color: rgb(0, 139, 248) width: 20px; height: 20px;"></i><span data-v-ee83f0f6=""
                    data-v-5e93c800="" class="section-title">审批</span>
                </div>
                <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-section">
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">待我处理</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-8256" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">我发起</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-9096" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                  <div data-v-ee83f0f6="" data-v-5e93c800="" class="sub-item">
                    <div data-v-ee83f0f6="" data-v-5e93c800="">
                      <span data-v-ee83f0f6="" data-v-5e93c800="">已驳回</span><span data-v-ee83f0f6=""
                        class="el-tooltip iconfont iconHint cursor-pointer lx_table_data" data-v-5e93c800=""
                        aria-describedby="el-tooltip-2757" tabindex="-1"></span>
                    </div>
                    <div data-v-ee83f0f6="" data-v-5e93c800=""
                      class="ak-fw-600 ak-fz-16 ak-lh-24 ak-mg-top-4 ak-pointer sub-item-value value">
                      0
                    </div>
                  </div>
                </div>
              </div>
              <div class="el-loading-mask" style="display: none">
                <div class="el-loading-spinner">
                  <svg viewBox="25 25 50 50" class="circular">
                    <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                  </svg><!---->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-v-5e93c800="" data-v-5afeb3bc="" data-v-348e9d26="" class="home-card-box span-6"
          params="[object Object]" data-v-47602ae8="">
          <div data-v-5e93c800="" class="section-header">
            <span data-v-5e93c800="" class="header-left"><span data-v-5e93c800="" class="header-title">库存概览</span><i
                data-v-5e93c800="" class="iconfont lx_arrow_down_rev ak-rotate-270"></i></span>
            <div data-v-5afeb3bc="" role="radiogroup" class="el-radio-group item" data-v-5e93c800="">
              <label data-v-5afeb3bc="" role="radio" aria-checked="true" tabindex="0"
                class="el-radio-button el-radio-button--mini is-active"><input type="radio" tabindex="-1"
                  class="el-radio-button__orig-radio" value="num" /><span class="el-radio-button__inner"
                  style="overflow: hidden; text-overflow: ellipsis" inelement="0">数量<!----></span></label><label
                data-v-5afeb3bc="" role="radio" tabindex="-1" class="el-radio-button el-radio-button--mini"><input
                  type="radio" tabindex="-1" class="el-radio-button__orig-radio" value="value" /><span
                  class="el-radio-button__inner" style="overflow: hidden; text-overflow: ellipsis"
                  inelement="0">货值<!----></span></label>
            </div>
          </div>
          <div data-v-5e93c800="" class="section-content">
            <div data-v-5afeb3bc="" data-v-5e93c800="" class="main-section">
              <div id="stock" style="width: 400px; height: 300px"></div>
              <div data-v-5afeb3bc="" data-v-5e93c800="" class="overview-wrapper">
                <div data-v-5afeb3bc="" data-v-5e93c800="" class="overview">
                  <div data-v-5afeb3bc="" data-v-5e93c800="" class="storage ak-align-center">
                    <div data-v-5afeb3bc="" data-v-5e93c800="" class="icon ak-mg-right-12">
                      <i data-v-5afeb3bc="" data-v-5e93c800="" style="font-size: 18px; color: #fff"
                        class="el-icon-s-home"></i>
                    </div>
                    <div data-v-5afeb3bc="" data-v-5e93c800="" class="count-section">
                      <p data-v-5afeb3bc="" data-v-5e93c800="" class="sub-title">
                        在库
                      </p>
                      <p data-v-5afeb3bc="" data-v-5e93c800="" class="num-label oneLine"
                        style="overflow: hidden; text-overflow: ellipsis">
                        &lrm;98,655
                      </p>
                    </div>
                  </div>
                  <div data-v-5afeb3bc="" data-v-5e93c800="" class="shipping ak-align-center">
                    <div data-v-5afeb3bc="" data-v-5e93c800="" class="icon ak-mg-right-12">
                      <i data-v-5afeb3bc="" data-v-5e93c800="" class="iconfont lx_nav_logistics"></i>
                    </div>
                    <div data-v-5afeb3bc="" data-v-5e93c800="" class="count-section">
                      <p data-v-5afeb3bc="" data-v-5e93c800="" class="sub-title">
                        在途
                      </p>
                      <p data-v-5afeb3bc="" data-v-5e93c800="" class="num-label oneLine"
                        style="overflow: hidden; text-overflow: ellipsis">
                        &lrm;2,000
                      </p>
                    </div>
                  </div>
                </div>
                <div data-v-5afeb3bc="" data-v-5e93c800="" class="vxe-table-container ak-mg-top-16">
                  <div data-v-5afeb3bc=""
                    class="ak-table-round stock-overview-table vxe-table vxe-table--render-default tid_31 border--full row--highlight is--header is--footer is--animat is--round"
                    data-v-5e93c800="">
                    <div class="vxe-table-slots">
                      <div data-v-5afeb3bc=""></div>
                      <div data-v-5afeb3bc=""></div>
                      <div data-v-5afeb3bc=""></div>
                      <div data-v-5afeb3bc=""></div>
                    </div>
                    <div class="vxe-table--render-wrapper">
                      <div class="vxe-table--main-wrapper">
                        <div xid="31" class="vxe-table--header-wrapper body--wrapper">
                          <div class="vxe-body--x-space"></div>
                          <table xid="31" cellspacing="0" cellpadding="0" border="0" class="vxe-table--header"
                            style="width: 413px">
                            <colgroup>
                              <col name="col_34" style="width: 103px" />
                              <col name="col_35" style="width: 103px" />
                              <col name="col_36" style="width: 103px" />
                              <col name="col_37" style="width: 104px" />
                            </colgroup>
                            <thead>
                              <tr class="vxe-header--row">
                                <th colid="col_34" class="vxe-header--column col_34 col--left col--first">
                                  <div class="vxe-cell">
                                    <span class="vxe-cell--title"><span style="
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        "></span></span>
                                  </div>
                                </th>
                                <th colid="col_35" class="vxe-header--column col_35 col--left">
                                  <div class="vxe-cell">
                                    <span class="vxe-cell--title"><span style="
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        " inelement="0">FBA仓</span></span>
                                  </div>
                                </th>
                                <th colid="col_36" class="vxe-header--column col_36 col--left">
                                  <div class="vxe-cell">
                                    <span class="vxe-cell--title"><span style="
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        ">海外仓</span></span>
                                  </div>
                                </th>
                                <th colid="col_37" class="vxe-header--column col_37 col--left col--last">
                                  <div class="vxe-cell">
                                    <span class="vxe-cell--title"><span style="
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        " inelement="0">本地仓</span></span>
                                  </div>
                                </th>
                              </tr>
                            </thead>
                          </table>
                          <div class="vxe-table--header-border-line" style="width: 413px"></div>
                        </div>
                        <!---->
                        <div xid="31" class="vxe-table--body-wrapper body--wrapper" style="height: 96px">
                          <div class="vxe-body--x-space"></div>
                          <div class="vxe-body--y-space"></div>
                          <table xid="31" cellspacing="0" cellpadding="0" border="0" class="vxe-table--body"
                            style="width: 413px">
                            <colgroup>
                              <col name="col_34" style="width: 103px" />
                              <col name="col_35" style="width: 103px" />
                              <col name="col_36" style="width: 103px" />
                              <col name="col_37" style="width: 104px" />
                            </colgroup>
                            <tbody>
                              <tr rowid="row_50" class="vxe-body--row">
                                <td colid="col_34" class="vxe-body--column col_34 col--left col--first">
                                  <div class="vxe-cell">
                                    <div data-v-5afeb3bc="" class="ak-align-center">
                                      <p data-v-5afeb3bc="" class="oneLine" style="
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        ">
                                        在库
                                      </p>
                                      <span data-v-5afeb3bc=""
                                        class="el-tooltip iconfont iconHint cursor-pointer ak-mg-left-4 lx_table_data"
                                        aria-describedby="el-tooltip-4723" tabindex="-1"></span><!---->
                                    </div>
                                  </div>
                                </td>
                                <td colid="col_35" class="vxe-body--column col_35 col--left">
                                  <div class="vxe-cell">
                                    <p data-v-5afeb3bc="" class="oneLine" style="
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                      ">
                                      &lrm;0
                                    </p>
                                  </div>
                                </td>
                                <td colid="col_36" class="vxe-body--column col_36 col--left">
                                  <div class="vxe-cell">
                                    <p data-v-5afeb3bc="" class="oneLine" style="
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                      ">
                                      -
                                    </p>
                                  </div>
                                </td>
                                <td colid="col_37" class="vxe-body--column col_37 col--left col--last">
                                  <div class="vxe-cell">
                                    <p data-v-5afeb3bc="" class="oneLine" style="
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                      ">
                                      &lrm;98,655
                                    </p>
                                  </div>
                                </td>
                              </tr>
                              <tr rowid="row_51" class="vxe-body--row">
                                <td colid="col_34" class="vxe-body--column col_34 col--left col--first">
                                  <div class="vxe-cell">
                                    <div data-v-5afeb3bc="" class="ak-align-center">
                                      <p data-v-5afeb3bc="" class="oneLine" style="
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        ">
                                        在途
                                      </p>
                                      <!----><span data-v-5afeb3bc=""
                                        class="el-tooltip iconfont iconHint cursor-pointer ak-mg-left-4 lx_table_data"
                                        aria-describedby="el-tooltip-2601" tabindex="-1"></span>
                                    </div>
                                  </div>
                                </td>
                                <td colid="col_35" class="vxe-body--column col_35 col--left">
                                  <div class="vxe-cell">
                                    <p data-v-5afeb3bc="" class="oneLine" style="
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                      ">
                                      &lrm;0
                                    </p>
                                  </div>
                                </td>
                                <td colid="col_36" class="vxe-body--column col_36 col--left">
                                  <div class="vxe-cell">
                                    <p data-v-5afeb3bc="" class="oneLine" style="
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                      ">
                                      -
                                    </p>
                                  </div>
                                </td>
                                <td colid="col_37" class="vxe-body--column col_37 col--left col--last">
                                  <div class="vxe-cell">
                                    <p data-v-5afeb3bc="" class="oneLine" style="
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                      ">
                                      &lrm;2,000
                                    </p>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <div class="vxe-table--checkbox-range"></div>
                          <div class="vxe-table--empty-block" style="width: 413px">
                            <div class="vxe-table--empty-content">暂无数据</div>
                          </div>
                        </div>
                        <div xid="31" class="vxe-table--footer-wrapper body--wrapper" style="margin-top: 0px">
                          <div class="vxe-body--x-space"></div>
                          <table xid="31" cellspacing="0" cellpadding="0" border="0" class="vxe-table--footer"
                            style="width: 413px">
                            <colgroup>
                              <col name="col_34" style="width: 103px" />
                              <col name="col_35" style="width: 103px" />
                              <col name="col_36" style="width: 103px" />
                              <col name="col_37" style="width: 104px" />
                            </colgroup>
                            <tfoot>
                              <tr class="vxe-footer--row">
                                <td colid="col_34" class="vxe-footer--column col_34 col--left col--ellipsis">
                                  <div class="vxe-cell c--tooltip" style="width: 101px">
                                    <span class="vxe-cell--item">合计</span>
                                  </div>
                                </td>
                                <td colid="col_35" class="vxe-footer--column col_35 col--left col--ellipsis">
                                  <div class="vxe-cell c--tooltip" style="width: 101px">
                                    <span class="vxe-cell--item">&lrm;0</span>
                                  </div>
                                </td>
                                <td colid="col_36" class="vxe-footer--column col_36 col--left col--ellipsis">
                                  <div class="vxe-cell c--tooltip" style="width: 101px">
                                    <span class="vxe-cell--item">-</span>
                                  </div>
                                </td>
                                <td colid="col_37" class="vxe-footer--column col_37 col--left col--last col--ellipsis">
                                  <div class="vxe-cell c--tooltip" style="width: 102px">
                                    <span class="vxe-cell--item">&lrm;100,655</span>
                                  </div>
                                </td>
                              </tr>
                            </tfoot>
                          </table>
                        </div>
                      </div>
                      <div class="vxe-table--fixed-wrapper"><!----><!----></div>
                    </div>
                    <div class="vxe-table--empty-placeholder" style="top: 40px; height: 96px">
                      <div class="vxe-table--empty-content">暂无数据</div>
                    </div>
                    <div class="vxe-table--border-line"></div>
                    <div class="vxe-table--resizable-bar"></div>
                    <div class="vxe-table--loading vxe-loading">
                      <div class="vxe-loading--spinner"></div>
                    </div>
                    <!----><!----><!----><!----><!---->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="el-loading-mask" style="display: none">
            <div class="el-loading-spinner">
              <svg viewBox="25 25 50 50" class="circular">
                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
              </svg><!---->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   getRealtimeData
//  } from "@/api/walmart/ordersData";
import * as echarts from "echarts";
export default {
  data() {
    return {
      authValues: [],
      authProps: { multiple: true },
      value: "选项1",
      isArrowUp: false, // 初始状态为 false，表示显示向下箭头
      isSales: true,
      isOrder: false,
      isLines: false,
      items: [
        { value: "1", text: "今日", isActive: true },
        { value: "7", text: "前7天", isActive: false },
        { value: "7", text: "前30天", isActive: false },
        { value: "7", text: "上月", isActive: false },
        { value: "7", text: "今年", isActive: false },
        { value: "7", text: "自定义", isActive: false },
        // 更多项...
      ],
      activeIndex: 0,
      uniqueId: Math.random().toString(36).substr(2, 9), // 生成一个唯一的ID用于radio的name属性
      queryParam: {
        authId: null,
        startTime: null,
        endTime: null,
      },

      //今日数据
      nowData: [],
      //昨日数据
      yesterData: [],

    };
  },
  created() {
    this.realtimeData();
  },
  mounted() {
    this.initBie();
    this.stockBie();
    const pacificDateNow = this.getPacificDateFromBeijing(); // 当前时间的太平洋日期
    console.log("当前太平洋日期是：", pacificDateNow);
  },
  computed: {
    arrowIconClass() {
      return this.isArrowUp ? "el-icon-arrow-up" : "el-icon-arrow-down";
    },
    salesClass() {
      if (this.isSales == true) {
        this.isOrder = false;
        this.isLines = false;
      }
      return this.isSales ? "selected-0" : "ak-pointer";
    },
    OrderClass() {
      if (this.isOrder == true) {
        this.isSales = false;
        this.isLines = false;
      }
      return this.isOrder ? "selected-0" : "ak-pointer";
    },
    linesClass() {
      if (this.isLines == true) {
        this.isSales = false;
        this.isOrder = false;
      }
      return this.isLines ? "selected-0" : "ak-pointer";
    },
  },
  methods: {

    //获取实时数据
    realtimeData(){
      const queryDate = this.getPacificDateFromBeijing();// 当前时间的太平洋日期
      // getRealtimeData(queryDate).then((response) => {
      //   this.nowData = response.nowData;
      //   this.yesterData = response.yesterData;
      // });
    },


    handleSales() {
      this.isSales = true;
    },
    handleOrder() {
      this.isOrder = true;
    },
    handleLines() {
      this.isLines = true;
    },
    setActive(index) {
      this.activeIndex = index;
    },
    initBie() {
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["今天", "昨日", "上周同日", "去年同日"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "今天",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "昨日",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "上周同日",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "去年同日",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    stockBie() {
      var chartDom = document.getElementById("stock");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 获取太平洋时间的年月日（基于北京时间）
    getPacificDateFromBeijing(beijingTimeStr) {
      // 如果不传入时间，默认取当前时间
      const beijingTime = beijingTimeStr
        ? new Date(beijingTimeStr.replace(/-/g, "/")) // 兼容 iOS
        : new Date();

      // 转为太平洋时间字符串
      const pacificStr = beijingTime.toLocaleString("en-US", {
        timeZone: "America/Los_Angeles",
      });

      const pacificDate = new Date(pacificStr);

      // 格式化 YYYY-MM-DD
      const year = pacificDate.getFullYear();
      const month = String(pacificDate.getMonth() + 1).padStart(2, "0");
      const day = String(pacificDate.getDate()).padStart(2, "0");

      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style>
/* 添加你的样式 */

body {
  -webkit-font-smoothing: antialiased;
  color: #55585f;
  background: #fff;
  font-size: 12px;
  line-height: unset !important;
}

.container {
  width: 98%;
  margin: 20px auto;
}

.header {
  text-align: center;
  padding: 20px 0;
}

.quick-links,
.notifications {
  margin-top: 20px;
}

/* */
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #f9fafc;
}

.grid-content {
  padding-top: 10px;
  min-height: 54px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.margin {
  margin-left: 10px;
}

.home-header[data-v-664c933a] {
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2000;
  -webkit-box-shadow: 0 4px 14px 0 rgba(177, 199, 226, 0.2);
  box-shadow: 0 4px 14px #b1c7e233;
}

.module-box>div[data-v-47602ae8] {
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.home-card-box[data-v-5e93c800] {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.home-card-box.fix-module .section-header[data-v-5e93c800] {
  height: 24px;
}

.home-card-box>.section-header[data-v-5e93c800] {
  padding: 16px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

.home-card-box>.section-header .header-left[data-v-5e93c800] {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.home-card-box>.section-header .header-left .header-title[data-v-5e93c800] {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: #000000f2;
  cursor: pointer;
}

.home-card-box>.section-header .header-right[data-v-5e93c800] {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -moz-column-gap: 8px;
  column-gap: 8px;
  row-gap: 12px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #8993a3;
}

.module .content[data-v-4cafd6a9] {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.content[data-v-4cafd6a9] {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 0 12px;
}

.card-item[data-v-b4049042] {
  overflow: hidden;
}

.card-item .title[data-v-b4049042] {
  color: #525966;
}

.card-item .value[data-v-b4049042] {
  margin-top: 6px;
  font-weight: 700;
  font-size: 20px;
  color: #000000f2;
}

.card-item .compare[data-v-b4049042] {
  margin-top: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.card-item .compare .label[data-v-b4049042] {
  color: #8993a3;
  font-size: 14px;
}

.card-item .compare .compare-value[data-v-b4049042] {
  margin-left: 6px;
  color: #525966;
  font-size: 14px;
}

.ak-search-wrapper {
  background: #ffffff;
  padding: 10px 16px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 0 #e6e8eb;
  box-shadow: 0 1px #e6e8eb;
}

.el-row {
  margin-bottom: 0px;
}

.vertical-center {
  padding-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.no-hover-bg {
  /* 初始状态样式 */
  color: #005bf5;
  border-color: transparent;
  padding: 5px 10px;
  border-radius: 3px;
  transition: box-shadow 0.3s ease;
  /* 添加过渡效果 */

  /* 悬停时的效果 */
}

.no-hover-bg:hover {
  box-shadow: 0 0 10px rgba(0, 91, 245, 0.4);
  /* 向四个方向延伸的阴影效果 */
}

.module-box>div.span-9[data-v-47602ae8] {
  grid-column: auto / span 9;
}

.card-list[data-v-164faaf0] {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 9px;
  width: 100%;
}

.card-list .card.selected-0[data-v-164faaf0] {
  border-inline-start: 4px solid #209ff4 !important;
  padding: 12px 16px 12px 13px;
  box-shadow: 0 6px 12px #5185c017;
  background: #fff;
}

.card-list .card[data-v-164faaf0] {
  border-radius: 4px;
  overflow: hidden;
}

.card-list .card>.card-value[data-v-164faaf0] {
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -1px;
}

.ak-mg-tb-6,
.ak-mg-top-6 {
  margin-top: 6px;
}

.ak-primary-text {
  color: #0b1019;
}

.card-list .card .chain-ratio[data-v-164faaf0] {
  font-size: 12px;
  line-height: 14px;
}

.ak-quaternary-text {
  color: #888c94;
}

.card-list .card[data-v-164faaf0] {
  border-radius: 4px;
  padding: 12px 16px;
  overflow: hidden;
  background: rgb(247, 249, 253);
}

.ak-link-hover-text {
  color: #004ccc;
}

.card-list .card[data-v-164faaf0]:not(.disabled):hover {
  background: #fff;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(81, 133, 192, 0.11);
  box-shadow: 0 4px 8px #5185c01c;
}

.module-box>div.span-3[data-v-47602ae8] {
  grid-column: auto / span 3;
}

body.is-chrome div {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

.module-box[data-v-47602ae8] {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  grid-gap: 16px;
  padding: 16px;
}

.module-box>div.span-1[data-v-47602ae8] {
  grid-column: auto / span 12;
}

.home-card-box>.section-content[data-v-5e93c800] {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 16px;
  margin-bottom: 16px;
  position: relative;
  min-height: 0;
}

.content[data-v-ee83f0f6] {
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 314px !important;
  flex: 0 0 314px !important;
  overflow: auto;
}

.ak-align-center,
.ak-flex-column-center,
.ak-flex-row-center {
  -webkit-box-align: center;
  align-items: center;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.section .section-title[data-v-ee83f0f6] {
  font-weight: 700;
  margin-left: 8px;
}

.section .sub-section[data-v-ee83f0f6] {
  margin-top: 16px;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

.section .sub-section .sub-item[data-v-ee83f0f6] {
  padding: 12px;
  background: #f7f9fc;
}

.el-tooltip.lx_table_data {
  height: auto;
  line-height: 15px;
  vertical-align: middle;
  margin-left: 2px;
}

.section+.section[data-v-ee83f0f6] {
  margin-top: 24px;
}

.section .sub-section .sub-item .sub-item-value[data-v-ee83f0f6] {
  color: #000000f2;
}

.ak-lh-24 {
  line-height: 24px;
}

.ak-mg-tb-4,
.ak-mg-top-4 {
  margin-top: 4px;
}

.ak-pointer {
  cursor: pointer;
  outline: 0;
}

.ak-fz-16 {
  font-size: 16px !important;
  font-family: PingFangSC-Regular, PingFang SC, -apple-system, Microsoft YaHei,
    BlinkMacSystemFont, Segoe UI, Hiragino Sans GB, Helvetica Neue, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.ak-fw-600 {
  font-weight: 600;
}

.module-box>div.span-6[data-v-47602ae8] {
  grid-column: auto / span 6;
}

.main-section[data-v-5afeb3bc] {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  -moz-column-gap: 20px;
  column-gap: 20px;
  overflow: hidden;
}

.main-section>*[data-v-5afeb3bc] {
  overflow: hidden;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.main-section .overview-wrapper .overview[data-v-5afeb3bc] {
  display: flex;
  -moz-column-gap: 16px;
  column-gap: 16px;
  overflow: hidden;
}

.main-section .overview-wrapper .overview>div.storage[data-v-5afeb3bc] {
  border-color: #94bbff;
  background-color: #f0f5fe;
}

.main-section .overview-wrapper .overview>div[data-v-5afeb3bc] {
  border-radius: 4px;
  border: 1px solid;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.main-section .overview-wrapper .overview>div.shipping[data-v-5afeb3bc] {
  border-color: #deadff;
  background-color: #fdfaff;
}

.main-section .overview-wrapper .overview>div.storage .icon[data-v-5afeb3bc] {
  background-color: #4086ff;
}

.main-section .overview-wrapper .overview>div .icon[data-v-5afeb3bc] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.ak-mg-lr-12,
.ak-mg-right-12 {
  margin-right: 12px;
}

.main-section .overview-wrapper .overview>div .count-section[data-v-5afeb3bc] {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}

.main-section .overview-wrapper .overview>div .sub-title[data-v-5afeb3bc] {
  color: #545659;
  font-size: 14px;
  margin-bottom: 6px;
}
</style>
